<template>
  <div class="detail_box">
    <div v-if="show">
      <van-skeleton color="#000" title avatar :row="3" />
    </div>
    <div v-else>
      <!-- 返回 -->
      <VueMovieComeBack :Home="true"  title="电影" />
      <!-- 电影头部 -->
  <VueMovieFilmTitleDetail :Detail="Detail.movie" />
      <!-- 简介部分 -->
     <YuGao  :Detail="Detail.movie"/>
          <VueMovieScore :Detail="Detail.movie" />
      <VueMovieSynopsis :Detail="Detail.$share.wechat.message" />
        
          <!-- 剧照图片 -->
          <VueMovieStagePhoto :Detail="Detail.movie" />
          <VueMovieComment :comment="comment" />
      
      <VueMovieBtnBox :Detail="Detail.movie" />
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { GetdetailAPI,GetmorecommentsAPI } from "@/api/api.js";
import VueMovieComeBack from "@/components/common/come_back.vue";
import VueMovieFilmTitleDetail from "@/components/detail/film_title_detail.vue";
import VueMovieScore from "@/components/detail/score.vue";
import VueMovieSynopsis from "@/components/detail/synopsis.vue";
import VueMovieStagePhoto from "@/components/detail/stage_photo.vue";
import VueMovieBtnBox from "@/components/detail/btn_box.vue";
import VueMovieComment from "@/components/detail/comment.vue";
import YuGao from "@/components/detail/YuGao.vue";
export default {
  name: "VueMovieDetailPage",
  components: {
    VueMovieComeBack,
    VueMovieScore,
    VueMovieSynopsis,
    VueMovieStagePhoto,
    VueMovieFilmTitleDetail,
    VueMovieBtnBox,
    VueMovieComment,
    YuGao
  },
  data() {
    return {
       loading: true,
      id: this.$route.params.id,
      active: 0,
      Detail: {},
      comment: [],
      show: true,
      
    };
  },
  mounted() {
    this.loading = false;
    GetdetailAPI({ movieid: this.id }).then((res) => {
      this.Detail = res.data;
      if (res.status == 200) {
        this.show = !this.show;
      }
    });
    // 获取评论

  GetmorecommentsAPI({ movieid: this.id}).then((res)=>{
          this.comment =[...res.data.comments.comments,...res.data.comments.hotComments];     
})
    // 默认顶部
    scrollTo(0, 0);
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.detail_box {
  min-height: 100vh;
  padding-bottom: 32px;
  background-color: #2c1c1e;

}
</style>